<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>编辑内容</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-repeat: no-repeat;
				background-size: cover;
				background-image: url(./img/1.jpg);
			}

			.box {
				width: 500px;
				height: 500px;
				background-color: #fff;
			}

			.box input {
				outline: none;
				border: 1px solid #ccc;
			}

			.box .down {
				width: 100px;
				border: 1px solid #000;
				text-align: center;
				background-color: #0f0;
			}

			.box .down h2 {
				font-size: 20px;
				font-weight: normal;
			}

			.box .down ul {
				display: none;
			}

			.box .down ul li {
				border-top: 1px solid #000;
			}

			img {
				width: 100px;
			}
			.box>ul li{
				width: 50px;
				height: 50px;
				border: 1px solid #000;
			}
			.box>ul li.on{
				background-color: #f00;
			}
			.color{
				color: blue;
				font-size: 28px;
			}
		</style>
	</head>
	<body>
		<button class="btn">开关灯</button>
		<div class="box">
			<input type="text">

			<div class="down">
				<h2>微博</h2>
				<ul>
					<li>私信</li>
					<li>评论</li>
					<li>@我</li>
				</ul>
			</div>
			<ul>
				<li class="on color">1</li>
				<li class="color">2</li>
				<li class="color">3</li>
				<li class="color">4</li>
				<li class="color">5</li>
				<li class="color">6</li>
			</ul>
		</div>
		<img src="./img/1.jpg" alt="">
		<img src="./img/2.jpg" alt="">
		<img src="./img/3.jpg" alt="">
		<img src="./img/4.jpg" alt="">

		<script type="text/javascript">
			// 输入框变色
			let oIpt = document.querySelector('.box input')
			oIpt.onfocus = function() {
				console.log(555);
				oIpt.style.border = '1px solid red'
			}
			oIpt.onblur = function() {
				console.log(6666);
				oIpt.style.border = '1px solid #ccc'
			}
			// 新浪下拉
			let oDown = document.querySelector('.down')
			let oUl = oDown.querySelector('ul')

			console.log(oDown);
			oDown.onmouseenter = function() {
				console.log('onmouseenter');
				oUl.style.display = 'block'
			}
			oDown.onmouseleave = function() {
				console.log('onmouseleave');
				oUl.style.display = 'none'
			}
			// oDown.onmouseover = function(){
			// 	console.log('onmouseover');
			// 	// oUl.style.display = 'block'
			// }
			// oDown.onmouseout = function(){
			// 	console.log('onmouseout');
			// 	// oUl.style.display = 'none'
			// }

			// onmouseenter ,onmouseleave 不会再子元素身上再次触发    onmouseover,onmouseout 会在子元素身上再次触发
			// 开关灯

			let oBtn = document.querySelector('.btn')
			let oBox = document.querySelector('.box')
			let flag = true; // true 就是白色  false 就是黑色
			oBtn.onclick = function() {
				oBox.style.backgroundColor = flag ? 'black' : '#fff'
				flag = !flag
			}
			// 背景图片切换
			let aImg = document.querySelectorAll('img')
			for (let i = 0; i < aImg.length; i++) {
				aImg[i].onclick = function() {
					document.body.style.backgroundImage = 'url('+this.src+')'
				}
			}
			
			/**
			 * 排他操作
			 * 先把全部恢复正常 然后改变要改的哪一个   6+1
			 * 将当前变红 其他全部变白     6
			 * 将当前的红的变白 将想要变红的变红   2
			 */ 
			let aLi = document.querySelectorAll('.box>ul li')
			let nowIndex = 0
			for (let i = 0; i < aLi.length; i++) {
				aLi[i].onclick = function() {
					// aLi[nowIndex].className = 'color'
					// aLi[i].className = 'color on'
					// aLi[nowIndex].classList.remove('on')
					// aLi[i].classList.add('on')
					// this.classList.toggle('on')
					console.log(this.classList.contains('on'));
					nowIndex = i
				}
			}
		</script>


		<!-- 
		
		 1.onmouseenter与onmouseleave
		  再其子元素身上 不会 触发 该事件
		 2.onmouseover与onmouseout
		 在子元素身上也会 再次触发 事件
		 
		1循环获取节点
		
		2，闭包  - 闭包指的是有权访问父函数作用域的变量的函数，即使在父函数关闭之后。
			变量的生命周期
			全局变量活得和您的应用程序（窗口、网页）一样久。
			局部变量活得不长。它们在函数调用时创建，在函数完成后被删除。
			一个计数器的困境
			--断点调试
		3.排他操作
		 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：
			1. 所有元素全部清除样式（干掉其他人）
			2. 给当前元素设置样式 （留下我自己）
			3. 注意顺序不能颠倒，首先干掉其他人，再设置自己
			
		4.classList  - 通过类名改样式
		 dom.classList.add('on')添加类名
		 dom.classList.remove('on')移除类名
		 dom.classList.toggle('on')切换类名
		 dom.classList.replace('old','new')替换类名
		 dom.classList.contains('on')判断是否包含类名 on
		 -->
	</body>
</html>